<template>
	<div>
		<van-index-bar>
			<div v-for="(v, i) in carList" :key="i">
				<van-index-anchor :index="v.title" />
				<van-cell v-for="item in v.children" :key="item.MasterID" :title="item.Name" :icon="item.CoverPhoto" />
			</div>
		</van-index-bar>

	</div>
</template>

<script lang="ts" setup>
import { fetchCarList } from '@/api';
import { onMounted, ref } from 'vue';

interface CarItem {
	title: string
	children: CarItemState[]
}

interface CarItemState {
	CoverPhoto: string
	MasterID: string
	Name: string
	Spelling: string
	newTags: []
	tagurl: string
}

const carList = ref<CarItem[]>([])

onMounted(() => {
	fetchCarList().then(resp => {
		const result: CarItem[] = [];

		(resp.data.data as CarItemState[]).forEach(v => {
			const s = result.find(item => item.title === v.Spelling[0])
			if (s) {
				s.children.push(v)
			} else {
				result.push({ title: v.Spelling[0], children: [v] })
			}
		})
		console.log(result)
		carList.value = result
	})
})

</script>